<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">

    <link href="validatestyle.css" rel="stylesheet">
</head>
<body>

<div class="container-fluid">
    <form id="myform" action="form.php" method="post" onsubmit="return check();">
        <table class="table">
            <thead>
            <tr>
                <th width="200"></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    用户名:
                </td>
                <td>
                    <label>
                        <input type="text" name="username"
                               valType="username" tipStyle="bottom" tip="输入用户名哦!"
                               maxLength="12"
                               required/>
                    </label>
                </td>
                <td>
                    新增输入时的提示信息
                </td>
            </tr>
            <tr>
                <td>
                    输入长度限制:
                </td>
                <td>
                    <label>
                        <input type="text" name="changdu"
                               tipStyle="bottom" tip="这是长度限制哦!" minLength="5" maxLength="12"
                               required/>
                    </label>
                </td>
                <td>
                    不填写valtype也能验证,就是输入什么都可以,只是验证长度
                </td>
            </tr>
            <tr>
                <td>
                    密码:
                </td>
                <td>
                    <label>
                        <input type="password" name="pwd"
                               tipStyle="bottom" tip="输入正确的密码哦!" minLength="5" maxLength="12"
                               required/>
                    </label>
                </td>
                <td>
                    划时代修改,密码也可以验证
                </td>
            </tr>
            <tr>
                <td>
                    邮箱:
                </td>
                <td>
                    <label>
                        <input type="text" name="email"
                               valType="email"
                               tip="哈哈,这是邮箱哦!"
                               required/>
                    </label>
                </td>
                <td>
                    改变提示信息的方向也是可以的
                </td>
            </tr>
            <tr>
                <td>
                    身份证号码:
                </td>
                <td>
                    <label>
                        <input type="text" name="shenfen"
                               valType="idcard"
                               tipStyle="bottom" tip="输入18位身份证号码哦!" maxLength="18"
                               required/>
                    </label>
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    手机:
                </td>
                <td>
                    <label>
                        <input type="text" name="shouji"
                               valType="mobile"
                               tip="手机啊啊啊!"
                               required/>
                    </label>
                </td>
                <td>
                    已经限制不能输入字母
                </td>
            </tr>
            <tr>
                <td>
                    远程验证:
                </td>
                <td>
                    <label>
                        <input type="text" name="yuancheng1"
                               valType="int"
                               tip="可以先数字验证,然后远程验证!"
                               remoteUrl="/validate/remote.php"
                               required/>
                    </label>
                </td>
                <td>
                    服务器判断123456验证成功
                </td>
            </tr>
            <tr>
                <td>
                    远程验证2:
                </td>
                <td>
                    <label>
                        <input type="text" name="yuancheng2"
                               valType="int"
                               tip="可以先数字验证,然后远程验证!"
                               remoteUrl="/validate/remote.php"
                               remote_notValidValue="123"
                               required/>
                    </label>
                </td>
                <td>
                    可以声明某些值是不经过服务器验证.<br>
                    应用:当进入用户修改页面时,就不验证值是否存在了,当新建的时候才验证<br>
                    这里不验证123
                </td>
            </tr>
            <tr>
                <td>
                    扩展:
                </td>
                <td>
                    <label>
                        <input type="text" name="shenfen"
                               valType="int"
                               tip="不必填项,但是填了就给你验证"
                               />
                    </label>
                </td>
                <td>
                    不必填项,但是填了就给你验证
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" class="btn btn-default" value="提交"/>
                    <input type="button" class="btn btn-default" onclick="hide()" value="刷新所有提示信息"/>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

<script src="jquery.min.js"></script>
<script type="text/javascript" src="validator+.js"></script>
<script type="text/javascript">
    function hide() {
        $('#myform').validatorX("refresh");
    }

    function check() {
        var result = $('#myform').Valid();
        return result;
    }

    $(document).ready(function () {
        $("input[type=text],input[type=password]").val(new Date().getSeconds());
        $('#myform').validatorX();
    });
</script>
</body>
</html>